<template>
  <div class="wrapper">
    <div class="search">
        <div class="search__back iconfont" @click="handleBack">&#xe6db;</div>
        <div class="search__content">
            <span class="search__content__icon iconfont">&#xe87c;</span>
            <input class="search__content__input" placeholder="请输入商品名称搜索"/>
        </div>
    </div>
    <ShopInfo  :item = "item" :hideBorder="true" v-show="item.imgUrl"/>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { get } from '../../utils/request'
import ShopInfo from '../../components/ShopInfo'

// 获取当前商铺详情
const useShopInfoEffect = () => {
  const route = useRoute() // 获取路由参数
  const data = reactive({ item: {} })
  const getItemData = async () => {
    const result = await get(`/api/shop/${route.params.id}`)
    if (result?.errno === 0 && result?.data) {
      data.item = result.data
    }
  }
  const { item } = toRefs(data)
  return { item, getItemData }
}

// 点击回退逻辑
const useHandleBackRouterEffect = () => {
  const router = useRouter() // 获取路由实例
  const handleBack = () => {
    router.back()
  }
  return { handleBack }
}
export default {
  name: 'Shop',
  components: { ShopInfo },
  setup () {
    const { item, getItemData } = useShopInfoEffect()
    const { handleBack } = useHandleBackRouterEffect()
    getItemData()
    return { item, handleBack }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';

.wrapper {
    padding: 0 0.18rem;
}
.search {
    display: flex;
    margin: .14rem 0 .04rem 0;
    line-height: .32rem;
    &__back {
      width: .3rem;
      font-size: .24rem;
      color: #B6B6B6;
    }
    &__content {
      display: flex;
      flex: 1;
      width: 3.1rem;
      background: $search-bg-color;
      border-radius: .16rem;
      &__icon {
        width: .44rem;
        text-align: center;
        color: $search-font-color;
      }
      &__input {
        border: none; // 去掉输入框的边框
        outline: none; // 去掉输入框的聚焦样式
        background: none; // 去掉输入框的背景色
        width: 100%; // 宽度填满父元素
        padding-right: .2rem;
        color: $content-font-color;
        font-size: .14rem;
        &::placeholder {
            color: $content-font-color
        }
      }
    }
}
</style>
